import React, { Component } from 'react'

export default class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      list: ['a', 'b', 'c', 'd']
    }
  }
  render() {
    // jsx代码中不可以使用 for 循环等流程语句
    // 可以在 for 循环中写jsx 代码
    // 可以借助于数组 渲染数据
    const arr = []
    // for (var i = 0; i < this.state.list.length; i++) {
    //   arr.push(
    //     <p key = { i }>{ this.state.list[i] }</p>
    //   )
    // }
    // for (var i in this.state.list) { // for in 循环 变量为 索引值
    //   arr.push(
    //     <p key = { i }>{ this.state.list[i] }</p>
    //   )
    // }
    // for (var item of this.state.list) { // for of 循环 变量为 元素本身
    //   arr.push(
    //     <p key = { item }>{ item }</p>
    //   )
    // }
    this.state.list.forEach((item, index) => {
      arr.push(
        <p key = { index }>{ item }</p>
      )
    })

    return (
      <div>
        { arr }
      </div>
    )
  }
}
